<template>
  <div class="card">
    <div
      class="card-header"
      style="display: flex; justify-content: space-between"
    >
      <div class="card-title">
        <h4 style="margin-block-start: 0; font-size: 1.1rem; font-weight: 400">
          用户量
        </h4>
      </div>
      <div class="select">
        <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
    </div>
    <el-row style="display: flex; line-height: 1.45; flex-wrap: wrap">
      <el-col :sm="5" style="flex: 0 0 41.6667%">
        <div
          class="left"
          style="
            padding-top: 0;
            width: 100%;
            height: 100%;
            min-height: 183px;
            display: flex;
          "
        >
          <div>
            <h1 style="font-weight: 400; font-size: 3rem">2.7k</h1>
            <h5 style="margin-top: 10px; font-weight: 400">
              <span style="color: #21b978">+5.2%</span>
              <span>vs {{ value }}</span>
            </h5>
          </div>
        </div>
      </el-col>
      <el-col :sm="14">
        <div
          id="columnchart"
          :class="className"
          :style="{ height: height, width: width }"
          style="
            justify-content: center !important;
            width: 484px;
            border: 0 14px;
            padding: 0 14px;
            box-sizing: border-box;
          "
        ></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import ApexCharts from "apexcharts";
// require("echarts/theme/macarons"); // echarts theme

export default {
  data() {
    return {
      options: [
        {
          value: "Last 7 Days",
          label: "Last 7 Days",
        },
        {
          value: "Last 28 Days",
          label: "Last 28 Days",
        },
        {
          value: "Last Month",
          label: "Last Month",
        },
        {
          value: "Last Year",
          label: "Last Year",
        },
      ],
      value: "Last 7 Days",
    };
  },
  mounted() {
    var options = {
      chart: {
        type: "bar",
        height: 350,
      },
      plotOptions: {
        bar: {
          horizontal: false,
          columnWidth: "45%",
        },
      },
      colors: "#39c5bb",
      series: [
        {
          name: "Sessions",
          data: [28, 40, 36, 52, 38, 60, 55],
        },
      ],
      dataLabels: {
        enabled: false,
      },
      xaxis: {
        categories: ["", "", "", "", "", "", "", "", ""],
      },
      yaxis: [
        {
          axisBorder: {
            show: false,
            color: "#247BA0",
          },
          labels: {
            show: false,
            style: {
              colors: "#247BA0",
            },
          },
        },
      ],
    };

    var chart = new ApexCharts(document.querySelector("#columnchart"), options);

    chart.render();
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    // initChart() {
    //   this.chart = echarts.init(this.$el, "macarons");
    //   this.setOptions(this.chartData);
    // },
    // setOptions({ expectedData, actualData } = {}) {
    //   this.chart.setOption({
    //     xAxis: {
    //       data: [],
    //       boundaryGap: false,
    //       axisTick: {
    //         show: false,
    //       },
    //     },
    //     grid: {
    //       left: 10,
    //       right: 10,
    //       bottom: 20,
    //       top: 30,
    //       containLabel: true,
    //     },
    //     tooltip: {
    //       trigger: "axis",
    //       axisPointer: {
    //         type: "cross",
    //       },
    //       padding: [5, 10],
    //     },
    //     yAxis: {
    //       axisTick: {
    //         show: false,
    //       },
    //     },
    //     legend: {
    //       data: ["expected", "actual"],
    //     },
    //     series: [
    //       {
    //         name: "expected",
    //         itemStyle: {
    //           normal: {
    //             color: "#FF005A",
    //             lineStyle: {
    //               color: "#FF005A",
    //               width: 2,
    //             },
    //           },
    //         },
    //         smooth: true,
    //         type: "line",
    //         data: expectedData,
    //         animationDuration: 2800,
    //         animationEasing: "cubicInOut",
    //       },
    //       {
    //         name: "actual",
    //         smooth: true,
    //         type: "line",
    //         itemStyle: {
    //           normal: {
    //             color: "#3888fa",
    //             lineStyle: {
    //               color: "#3888fa",
    //               width: 2,
    //             },
    //             areaStyle: {
    //               color: "#f3f8ff",
    //             },
    //           },
    //         },
    //         data: actualData,
    //         animationDuration: 2800,
    //         animationEasing: "quadraticOut",
    //       },
    //     ],
    //   });
    // },
  },
};
</script>
<style lang="scss" scoped>
.card-header {
  display: flex;
}
</style>
